در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.
انتخاب Breakpoint بر اساس بودجه Performance و کارایی
چی میشه اگه ما ایده بودجه Performance رو در واکنشگرا کردن تصاویر مورد استفاده قرار بدیم؟ چطوری میشه اون رو تفسیر کرد؟
ما با تعریف کردن یک بودجه برای مقدار بایت اضافی که مرورگر اجازه داره تصویر مورد نظر رو دانلود کنه و در صفحه نشون بده، شروع میکنیم. مثلا ما تصمیم میگیریم که 20 کیلوبایت برای بودجه واکنشگرا کردن هر تصویر قرار بدیم. این موضوع به این معنی هست که ما حق نداریم برای هیچ کدام از منابع تصاویرمون، تصویری رو انتخاب کنیم که از این مقدار بودجه، بایتهای اضافی بیشتری رو دانلود کنه.
زمانی که ما اینکار رو انجام دادیم، ما تعداد تغییرات Image Breakpoint ها رو بر پایه تنوع و گوناگونی نمایشی پیدا میکنیم. بیاید تعدادی مثال رو با هم بررسی کنیم.
تصویر Tim Square : دارای 8 Image Breakpoint
این تصویر پیچیده هست و تنوع نمایشی زیادی داره. این تنوع و گوناگونی رنگها و الگوها به ما میفهمونه که فشرده کردن این تصویر JPEG باعث افت کیفیت تصویر میشه و به زیبایی اون صدمه میزنه. به این دلیل از 8 Image Breakpoint برای این تصویر استفاده میکنیم که دامنه تغییر حجم اونا تقریبا 20 کیلوبایت هست. جدولی از سایز و حجم اونا رو در زیر ببینید:
شماره Breakpoint | Width | Height | File Size |
---|---|---|---|
1 | 320 | 213 | 25K |
2 | 453 | 302 | 44K |
3 | 579 | 386 | 65K |
4 | 687 | 458 | 85K |
5 | 786 | 524 | 104K |
6 | 885 | 590 | 124K |
7 | 975 | 650 | 142K |
8 | 990 | 660 | 151K |
تصویر Moing in Kettering : دارای 3 Image Breakpoint
برخلاف تصویر قبلی، این تصویر دارای سطح زیادی با رنگها مشابه هست و تنوع زیادی نداره، به همین دلیل این تصویر میتونه بهتر و بیشتر فشرده بشه و سایزش کاهش پیدا کنه. بدلیل اینکه تصویرمون بهتر و بیشتر میتونه فشرده بشه، بودجه مورد نظر هم متناسب با اون تغییر میکنه و کاهش داده میشه. ما برای این تصویر سه Image Breakpoint در نظر میگیریم.
تعداد Breakpoint | Width | Height | File Size |
---|---|---|---|
1 | 320 | 213 | 9.0K |
2 | 731 | 487 | 29K |
3 | 990 | 660 | 40K |
تصویر لوگوی Microsoft : دارای 1 Image Breakpoint
این تصویر یک تصویر PNG ساده هست. در سایز بزرگ یا 660*990، این تصویر فقط 13 کیلوبایت حجم داره بهمین دلیل که برای بودجمون هم صدق میکنه، نیازی به Breakpoint های بیشتری نیس و یکی کفایت میکنه.
تعداد Breakpoint | Width | Height | File Size |
---|---|---|---|
1 | 990 | 660 | 13K |
میتونین برای دیدن مثالهای بیشتر به اینجا برید. با دیدن این تصاویر بیشتر با این موضوع و عنوان آشنا میشید.
باید اینو بگیم که پیشنهاد نمیشه که برای تک تک تصاویری که وجود داره این کار رو بصورت دستی انجام بدین. شاید در آینده راهی به وجود بیاد که با وارد کردن بودجه در سرور، خود سرور بیاد و متناسب با تصویر تعداد Image Breakpoint ها رو مشخص کنه و اونا رو تهیه کنه و برای مرورگر بفرسته. در این لینک میتونین بیشتر در مورد بودجه کارایی بخونید.
در جلسات بعدی با ادامه مطالب در خدمتتون هستم.
موفق و سربلند باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 383 تاريخ : جمعه 31 ارديبهشت 1395 ساعت: 0:53
در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.
در این لحظه شاید به نظرتون برسه و با خودتون بگید که چرا از همون سایزی که قرار هست در صفحه نمایش داده بشه استفاده نمیکنیم و خودمون رو راحت کنیم؟!
نخست باید بگیم که تصاویر flexible و انعطاف پذیر در طراحی واکنشگرا با هر تغییر سایز viewport، سایزشون تغییر میکنه. اما اگر ما دقیقا از سایز تصویری که در صفحه قرار است نمایش داده بشه استفاده کنیم، به احتمال زیاد برای هر تغییر سایز viewport یا چرخش صفحه، باید یک منبع تصویر جدید با سایز متفاوت رو لود کرده و نمایش بدیم. بعد از اون اگه دقت کنید، کمی غیر طبیعی هست که هر سایزی که تصور میکنیم رو درست کنیم و قرار بدیم. البته امکانش هست که بصورت داینامیک و پویا سایز تصویر رو متناسب با شرایط تغییر سایز داد، اما زمانی که ما تصاویر رو تغییر سایز میدیم، سرور نیاز به زمان داره تا این کار رو برامون انجام بده و بهمین دلیل کمی طول میکشه تا تصویر به دست مرورگر برسه و نمایش داده بشه.
به همین دلیل بیشتر سایتها سایتهای بزرگ تصاویر خودشون رو بصورت Content Delivery Network یا CDN قرار میدن و اونا رو Cache میکنن. این کار میتونه در مقیاس خیلی بزرگ هزینه ی زیادی داشته باشه و برای هر کسی پیشنهاد نمیشه.
در انتها باید بگیم که مرورگر زمانی که شروع به دانلود تصویر میکنه، از سایز اون در صفحه اطلاعی نداره.
همونطور که در ابتدا بحث Breakpoint ها گفته شد، راه حل کاملا مشخصی برای انتخاب تعداد منابعی که برای نمایش در صفحه احتیاج دارید، وجود نداره. در عوض در اینجا قصد داریم راه حل هایی متفاوتی که میتونین برای این مشکل کارایی داشته باشه رو توضیح بدیم.
تطابق با breakpoint های قالب و صفحتون
یک نفر در تیمتون میگه: "شما فکر میکنید چه تعداد منبع تصویر برای این محصول و سایت مورد نیاز هست؟"
شما لحظه ای فکر میکنید و جواب میدید: "سه عدد چطوره؟ کوچک، متوسط و بزرگ.
اگه همین جواب رو دادین جای نگرانی وجود نداره، چون تقریبا همه افرادی که بر روی واکنشگرا کردن تصاویر کار میکنن چنین جوابی رو خواهند داد.
شاید سازمان شما هنوز هم در مورد موبایل و تبلت و Desktop فکر میکنه و نظر داره که برای اونا تصاویر Small و medium و Large رو لود کنه و قرار بده. این راه خوبی هست و میتونه شما رو از اینکه بخاید برای بیشتر سایزهای معروف viewport یک تصویر جداگونه قرار بدین، خلاص کنه.
اما باید علاوه بر این فکرها، اصولی هم پشت قضیه و کارمون باشه.
تست کردن نماینده و نمونه هایی از تصاویر
ما میتونیم کل سایت و استایلهای تصاویر اون رو مطالعه کنیم و اطلاعات اون رو در بیاریم و بفهمیم که چه Breakpoint هایی نیاز هست. سخت ترین کار اینه که همون نماینده و نمونه رو از سایت پیدا کنید و با توجه به اون تصمیم گیری کنید. اگر سایت مورد نظر استایلهای متفاوتی برای هر تصویر مجزا در نظر نگرفته باشه و همه اونا به یک شکل باشن، میشه بصورت ساده نمونه گیری کرد و برای اون Breakpont مشخص کرد. اما اگر استایلهای متفاوتی وجود داشته باشه در بعضی از مواقع فرآیند نمونه گیری غیر ممکن خواهد بود.
استفاده Memory بر توزیع Breakpoint ها تاثیر دارد
چندی پیش Tim Kadlec فرآیند نمایش تصاویر در موبایلها رو مورد بررسی قرار داد و یک Presentation ارائه کرد. در بررسی که منتشر کرد او استفاده از Memory تصاویر انعطاف پذیر در طراحی واکنشگرا رو مورد آزمایش قرار داد.
چیزی که این شخص به اون پی برد این بود که هر چه تصویر بزرگتر میشه، مقداری که باید کاهش داده بشه بیشتر و بزرگتر هست.
در مثال بالا، کاهش دادن سایز تصویر 600*600 پیکسل در هر دو جهت افقی و عمودی به اندازه 50 پیکسل باعث بوجود اومدن 230 هزار بایت حجم اضافی میشه و الکی اونا رو دانلود کردیم. اگر همین کار رو برای تصویر 200*200 پیکسل در نظر بگیریم و اون هم در هر جهت 50 پیکسل کاهش داده بشه، 70 هزار بایت فضای باطل و بیهوده رو لود میکنه.
دانستن این موضوع به ما بهتر میفهمونه که Breakpoint هامون رو چطوری انتخاب کنیم. ما باید هر چه تصویر بزرگتر میشه Breakpoint های بیشتری رو قرار بدیم تا بایتهای بیهوده دانلود نشن.
متاسفانه در حالیکه این روش به ما میگه که در سایزهای بزرگتر Breakpoint های بیشتری دارید، اما دقیقا نمیگه که این Breakpoint ها در کجا قرار دارن و چه عددی هستند.
در جلسات بعدی با ادامه مطالب در خدمتتون هستم.
موفق و سربلند باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 282 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57
در این مطلب نمونه 6 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2> <div class="hover06 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Rotate */ .hover06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 281 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی المنت برداری و وکتور قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید.
برای شروع وارد سایت timber بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 310 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57
توضیحات : Seo مخفف Search Engine Optimization به معنای بهینه سازی سایت برای موتور های جستجو می باشد. با توجه به درخواست های بالای کاربران ، مبنی بر برگزاری دوره سئو و همچنین نیاز به برگزاری یک دوره جامع برای آشنایی بیشتر وبمستران با بحث سئو ، برآن شدیم که یکی از دوره های سایت سون لرن را به مبحث SEO اختصاص دهیم. شما اگر بهترین برنامه نویس ، بهترین طراح رابط کاربری باشید و یا به طور کلی صاحب بهترین سایت هم که باشید ، تا زمانی که با بحث SEO آشنایی نداشته باشید نمیتوانید در سطح اینترنت خدمات ، کالا یا ... را به مخاطبانتان معرفی کنید یا به فروش برسانید. بنابرین سئو یک مبحث ضروری برای تمامی وبمستران و طراحان وب سایت می باشد که بایستی با آن آشنایی داشته باشند. متاسفانه بسیاری از طراحان وب و وبمسترها باورهای اشتباهی در رابطه با سئو دارند که باعث میشود این مبحث را یک چیز ساده یا برعکس یه چیز خیلی پیچیده بدانند. آیا میزان سئوی وب سایت خودتان رو براساس ابزار های آنالیز سئو تشخیص میدهید؟ آیا سئوی سایت خود را در طراحی قالب سایت خود می بینید؟ آیا سئوی سایت را در قرار دادن لینک خود در سایت های دیگر می بینید ؟ آیا سئو سایت را در نصب افزونه های موجود برای CMS های خود میدانید؟ بسیاری از سوالات این چنینی ممکن است ذهن شما را درگیر کرده باشد! در این دوره شما با پاسخ این سوالات و نحوه برخورد صحیح با آن ها آشنا خواهید شد. باید بدانید که سئو محدود به یک زمینه خاص نیست ، سئو ؛ ترکیبی از علم ، هنر و خلاقیت است. ما در این دوره سعی می کنیم به صورت جامع شما را با مفاهیم سئو به دور از اغراق و کاملا صادقانه آشنا کنیم تا خودتان بهینه ساز سایت خودتان باشید. امید است این دوره نیز برای شما دوستان گرامی مفید واقع گردد.
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 304 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23
در این مطلب نمونه 4 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo04">4. Zoom Out #2</h2> <div class="hover04 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom Out #2 */ .hover04 figure img { width: 400px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover04 figure:hover img { width: 300px; } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 267 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین وبسایتهای سال از نظر طراحی قرار داده شده و با کلیک بر روی هر ماه میتونین به اطلاعات اون دسترسی داشته باشید و با دیدن اونا ایده بگیرید.
برای شروع وارد سایت mmxv بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 295 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23
در این مطلب نمونه 3 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo03">3. Zoom Out #1</h2> <div class="hover03 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom Out #1 */ .hover03 figure img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover03 figure:hover img { -webkit-transform: scale(1); transform: scale(1); } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 297 تاريخ : دوشنبه 27 ارديبهشت 1395 ساعت: 9:12
در این مطلب نمونه 2 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo02">2. Zoom In #2</h2> <div class="hover02 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom In #2 */ .hover02 figure img { width: 300px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover02 figure:hover img { width: 350px; } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 254 تاريخ : يکشنبه 26 ارديبهشت 1395 ساعت: 4:15
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید.
برای شروع وارد سایت vertical-fixed-navigation-2 بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 296 تاريخ : يکشنبه 26 ارديبهشت 1395 ساعت: 4:15
نکته : با توجه به اینکه از جلسه آینده وارد مبحث پروژه نهایی این دوره خواهیم شد لذا برای آماده سازی مراحل کدنویسی پروژه استثنا جسله بعدی به جای سه شنبه , شنبه هفته آینده منتشر خواهد شد...
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 273 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 20:53
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون روشها و ترفندهای Javascript زیادی رو قرار داده و میتونین اونا رو مطالعه کرده و استفاده کنید.
برای شروع وارد سایت jstips بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 395 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 3:01
در این مطب و مطالب بعدی تعدادی افکت زیبا و دیدنی برای هاور بر روی تصاویر یا CSS Image Hover رو در خدمتتون قرار میدم که میتونین از اونا در سایتتون استفاده کنید و از اونا ایده بگیرید.
کد HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h2 id="demo01">1. Zoom In #1</h2> <div class="hover01 column"> <div> <figure><img src="pic01.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic02.jpg" /></figure> <span>Hover</span> </div> <div> <figure><img src="pic03.jpg" /></figure> <span>Hover</span> </div> </div> |
کد CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom In #1 */ .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } |
امیدوارم خوشتون بیاد.
موفق باشید. یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 253 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 3:01
توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 389 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 19:42
توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 347 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 19:42
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت کامل در مورد Inspector و Developer Tools موجود در Firefox توضیح داده و همه جزئیاتشو با تصویر بیان کرده. میتونین از این آموزش استفاده کنید و دانش خودتون در این زمینه رو افزایش بدین.
برای شروع وارد سایت firefox-devtools بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 302 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 4:42
در این قسمت میخوام یک کد ( Rotating text ) جالب رو در اختیارتون بزارم.
همونطور که دیدید یک متن در انتها وجود داره و چند لحظه یکبار با افکت چرخان و زیبا به متن دیگه ای تبدیل میشه. میتونین از این ایده در سایت خودتون نیز استفاده کنید.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 295 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 4:42
در این قسمت میخوام یک کد ( Secret Project ) جالب رو در اختیارتون بزارم.
همونطور که دیدید یک موبایل شبیه سازی شده و میتونین از فعل و انفعالات اون ایده بگیرید. روی هر دکمه که کلیک کنید، به صفحه مربوط به اون هدایت میشید.
بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.
موفق باشید.
یا علی
نوع کد رايگان
برچسب : نویسنده : استخدام کار 7learn بازدید : 311 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:38
در این مطلب میخوام سایتی رو بهتون معرفی کنم که با استفاده از اون میتونین فرمهای امنی رو بصورت Ajax تهیه کنید و درون سایت وردپرسی خودتون قرار بدین. در ابتدا مواردی که مدنظرتون هست رو انتخاب میکنید و بعد از اون خروجی رو بهتون میده و هر کدوم از کدهارو در جایی که ذکر میکنه قرار بدین.
برای شروع وارد سایت wpsecureforms بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 307 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:38
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 262 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:37